DatePicker = function(ct, onselect){
	this.weeks = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
	this.ct = ct; // container
	this.ct.addClass('dp-wrap');
	this.today = moment();
	this.selectedDate = this.today;
	this.currentMonth = moment().set('date', 1); //first day of month
	this.init();
	this.onselect = onselect;
}

DatePicker.prototype.setSelectHandler = function(onselect){
	this.onselect = onselect;
}

/*
 * step = -1, go to last month
 * step = 1, go to next month
 */
DatePicker.prototype.populate = function(){
	this.ct.find('.dp-month').text(this.currentMonth.format('MMM YYYY'));
	
	var cursor = this.currentMonth.clone();
	var weekday = cursor.weekday();
	//if it is Sun, start from the second line, otherwise from the first line
	if(weekday == 0){
		weekday = 7;
	}
	cursor.subtract(weekday, 'days');
	var tds = this.ct.find('td.dp-col');
	
	for (var i = 0; i < tds.length; i++) {
		var extraClass = "";
		if(this.currentMonth.isSame(cursor, 'month')){
			extraClass = "dp-cur-month";
		}
		if(this.today.isSame(cursor, 'day')){
			extraClass += " dp-today";
		}
		if(this.selectedDate.isSame(cursor, 'day')){
			$(tds[i]).addClass("selected");
		}
		$(tds[i]).html('<span class="dp-date ' + extraClass + '" dp-data="' + cursor.format("YYMMDD") + '">' + cursor.date() + '</span>');
		cursor.add(1, 'days');
	}
}



DatePicker.prototype.init = function(){
	var me = this;
	var weeks = this.weeks;
	var html = [];
	//head
	html.push('<div class="dp-head">');
	html.push('<span class="dp-prev">&lt;</span>');
	html.push('<span class="dp-month"></span>');
	html.push('<span class="dp-next">&gt;</span>');
	html.push('</div>');
	
	
	//creat a table
	html.push('<table cellspacing=0 class="dp-table">');
	html.push('<tr class="dp-title">');
	for (var i = 0; i < weeks.length; i++) {
		html.push('<td class="dp-col-' + i + '">');
		html.push(weeks[i]);
		html.push('</td>');
	}
	html.push('</tr>')
	for (var x = 0; x < 6; x++) {
		html.push('<tr class="dp-row dp-row-' + x + '">');
		for (var i = 0; i < weeks.length; i++) {
			html.push('<td class="dp-col-' + i + ' dp-col">');
			html.push('</td>');
		}
		html.push('</tr>');
	}
	html.push('</table>');
	
	this.ct.html(html.join(''));
	
	//add event
	this.ct.find('.dp-prev').click(function(){
		me.currentMonth.subtract(1, 'months');
		me.ct.find('.selected').removeClass('selected');
		me.populate();
	});
	this.ct.find('.dp-next').click(function(){
		me.currentMonth.add(1, 'months');
		me.ct.find('.selected').removeClass('selected');
		me.populate();
	});
	
	this.populate();
	
	this.ct.find('.dp-col').click(function(){
		me.ct.find('.selected').removeClass('selected');
		var date = moment($(this).children().attr('dp-data'), 'YYMMDD');
		me.selectedDate = date;
		var curMonth = me.currentMonth.month();
		if(date.month() < curMonth){
			me.currentMonth.subtract(1, 'months');
			me.populate();
		}
		else if(date.month() > curMonth){
			me.currentMonth.add(1, 'months');
			me.populate();
		}else{
			//refresh selected date
			$(this).addClass('selected');
		}
		if(me.onselect) me.onselect(date.startOf('day'));
	});
}